<template>
  <section class="main-table">
    <section class="table-title">
      <section class="title-txt">积分明细</section>
      <section class="main-buttons-btns">
        <el-button style="margin-left: 10px" size="small" @click="$router.back()">返回</el-button>
      </section>
    </section>
    <v-table
      :list="list"
      tag="Leaderboarddetails"
      :list-loading="listLoading"
      :filter-column="filtercolumn"
      :selection="false"
    />
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </section>
</template>
<script>
import { queryDetailList } from './../api/rank'
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
export default {
  name: 'RankDetail',
  components: {
    VTable,
    Pagination
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      list: [],
      total: 0,
      listLoading: false
    }
  },
  created() { this.init() },
  methods: {
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        userId: this.id
      }
      return new Promise((resolve, reject) => {
        queryDetailList(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },
    filtercolumn(scope, item) {
      if (item === 'taskRunningState') {
        return scope.row[item] == 0 ? '待执行' : scope.row[item] == 1 ? '执行中' : '已结束'
      } else {
        return scope.row[item]
      }
    },
    init() {
      if (this.$route.query.i) {
        this.id = this.$route.query.i
        this.getList()
      } else {
        this.$router.back()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .main-table {
    background-color: #fff;
    padding: 10px;
    .table-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      .title-txt {
        font-size: 16px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
</style>
